<template>
  <div class="doc-footer">
    <van-tabbar v-model="tabIndex" active-color="rgb(0 121 254)" inactive-color="#000">
      <van-tabbar-item
        v-for="(tabbar, index) in tabbars"
        :key="tabbar.name"
        :to="tabbar.path"
        :icon="tabbar.meta.icon"
        :class="{ 'van-tabbar-item--active': index === tabIndex }"
      >
        {{tabbar.meta.title}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'DocFooter',
  data () {
    return {
      tabIndex: 0
    }
  },
  computed: {
    tabbars () {
      return routes.filter(route => route.meta.isTabbar)
    }
  }
}
</script>

<style lang="scss">
.doc-footer {
  height: 100%;
}
</style>
